<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name       : Condition
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100103
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Usuarios</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" rel="stylesheet" media="screen" href="/static/style-css.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/static/buttons-css.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/static/menu-css.css" />
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript" src="/static/funciones.js"></script>
</head>
    <body onLoad="main()" style="height: 100%;">
<div id="wrapper">
	<div id="logo">
            <table border="0" width="100%" style="height: 100%">
                <tr>
                    <td width="70%">
                        <div style="margin-top: -30px;">
                            <h1>Hardware Performance&reg;</h1>
                            <p style="font-size: 15px;color: #FFFFFF;"><em>Centro de Servicio en Computaci&oacute;n e Internet</em></p>
                        </div>
                    </td>
                    <td align="right">
                        <div style="margin-top: 25px;">
                            <table border="0">
                                <tr>
                                    <td colspan="1" align="center">
                                        {% if admin %}
                                        <img src="/static/images/content/admin.png" width="110" height="110" alt="{{usuario}}" />
                                        {% endif %}
                                        {% if basic %}
                                        <img src="/static/images/content/basic.png" width="100" height="90" alt="{{usuario}}" />
                                        {% endif %}
                                    </td>
                                    <td>
                                        <h3 style="color: white;text-align: right;font-size: 16px;font-weight: bold">&iexcl;Hola {{ usuario }}!</h3>
                                        {% if admin %}
                                        <p style="color: white;text-align: right;font-size: 13px;font-style:italic;">Usuario Administrador</p>
                                        {% endif %}
                                        {% if basic %}
                                        <p style="color: white;text-align: right;font-size: 13px;font-style:italic;">Usuario B&aacute;sico</p>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="/logout" >
                                            <input type="button" value="" class="btn_logout"/>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
	</div>
	<hr />
	<!-- end #logo -->
	<div id="header">
		<div id="menu">
                    {% if admin %}
                    <div class="menu">
                        <ul>
                            <li><a href="/inicio">Inicio</a></li>
                            <li><a href="/facturas">Facturas</a>
                                <ul><li><a href="/consultafacturas">Consulta</a></li></ul>
                            </li>
                            <li><a href="/ordenes">&Oacute;rdenes</a>
                                <ul><li><a href="/consultaordenes">Consulta</a></li></ul>
                            </li>
                            <li><a id="current" href="/usuarios">Usuarios</a></li>
                        </ul>
                    </div>
                    {% endif %}
                    {% if basic %}
                    <div class="menu">
                        <ul>
                            <li><a href="/inicio">Inicio</a></li>
                            <li><a href="/facturas">Facturas</a>
                                <ul><li><a href="/consultafacturas">Consulta</a></li></ul>
                            </li>
                            <li><a href="/ordenes">&Oacute;rdenes</a>
                                <ul><li><a href="/consultaordenes">Consulta</a></li></ul>
                            </li>
                        </ul>
                    </div>
                    {% endif %}
		</div>
		<!-- end #menu -->
		<div id="search">
			<p id="fecha1"></p>
		</div>
		<!-- end #search -->
	</div>
	<!-- end #header -->
	<!-- end #header-wrapper -->
	<div id="page">
	<div id="page-bgtop">
		<div id="content">
			<div class="post">
                            <h2 class="title"><a href="#">Gesti&oacute;n de Usuarios</a></h2>
                            <!-- Nuevo usuario -->
                            {% if errorD %}
                            <p class="meta" style="color: red;font-size: 12px">Verifica que los datos est&eacute;n completos</p>
                            {% endif %}
                            {% if errorC %}
                            <p class="meta" style="color: red;font-size: 12px">Las contrase&ntilde;as no coinciden</p>
                            {% endif %}
                            {% if errorU %}
                            <p class="meta" style="color: red;font-size: 12px">El <b style="text-decoration:underline">nombre de usuario</b> ya ha sido registrado previamente</p>
                            {% endif %}
                            {% if registroU %}
                            <p class="meta" style="color: red;font-size: 12px">El usuario se ha registrado!</p>
                            {% endif %}
                            {% if errorCx %}
                            <p class="meta" style="color: red;font-size: 12px">Error de Conexi&oacute;n</p>
                            {% endif %}
                            <!-- Acutalizar Usuario -->
                            {% if update %}
                            <p class="meta" style="color: red;font-size: 12px">La informaci&oacute;n del usuario se ha actualizado</p>
                            {% endif %}
                            <div class="entry">
                                <div>
                                    <p class="opcion" id="newUser" style="cursor:pointer">Crear un Nuevo Usuario</p>
                                    <div class="contenido" id="div_newUser" >
                                        <form action="/registraUsuario/" method="POST">{% csrf_token %}
                                            <table border="0" width="auto"
                                                   style="margin-left: 40px;margin-top: -15px;"
                                                   >
                                                <tr>                                                    
                                                    <td colspan="1" rowspan="8">
                                                        <img src="/static/images/content/usuarios01.gif" width="155" height="143" alt="hola" />
                                                    </td>
                                                    <td colspan="2"></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Nombre de Usuario:</td>
                                                    <td><input type="text" name="id" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Nombre Completo:</td>
                                                    <td><input type="text" name="nombre" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Contrase&ntilde;a:</td>
                                                    <td><input type="password" name="password1" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Confirmar Contrase&ntilde;a:</td>
                                                    <td><input type="password" name="password2" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Tipo de Usuario:</td>
                                                    <td>
                                                        <select name="privilegios" id="privilegios">
                                                          <option value="admin"> Administrador </option>
                                                          <option value="basic"> B&aacute;sico </option>
                                                        </select>
                                                        <input type="hidden" name="status" value="activo" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" rowspan="2" align="center">
                                                        <input type="submit" value="" class="btn_insertuser" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </form>
                                    </div>
                                </div>
                                <div>
                                    <p class="opcion" id="editUser" style="cursor:pointer">Modificar un Usuario</p>
                                    <div class="contenido" id="div_editUser" style="border-color: red;" >
                                        <table id="table1_edit" border="0" width="auto"
                                               style="margin-left: 200px"
                                               >
                                            <tr>
                                                <td rowspan="4" align="right">
                                                    <img src="/static/images/content/edit00.png" width="70" height="75" alt="" class="aligncenter " />
                                                </td>
                                                <td style="width: auto;">&nbsp;</td>
                                                <td rowspan="4" align="right">
                                                    <input type="button" value="" onclick="infoEditar()" id="next_edit" class="btn_next" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="left" colspan="1">Selecciona un Usuario</td>
                                            </tr>
                                            <tr>
                                                <td align="left" colspan="1">
                                                    <input type="hidden" id="usuarios_ids" value="{{ ids }}" />
                                                    <input type="hidden" id="usuarios_nombres" value="{{ nombres }}" />
                                                    <input type="hidden" id="usuarios_passwords" value="{{ passwords }}" />
                                                    <input type="hidden" id="usuarios_privilegioss" value="{{ privilegioss }}" />
                                                    <input type="hidden" id="usuarios_statuss" value="{{ statuss }}" />
                                                    <select name="usuarioID" id="lista_usuarios">
                                                        <option id="user_prueba1" >Selecciona un usuario</option>
                                                    </select>
                                                    <script type="text/javascript">
                                                        var a = document.getElementById("usuarios_ids").value;
                                                        var b = document.getElementById("usuarios_nombres").value;
                                                        var c = document.getElementById("usuarios_passwords").value;
                                                        var d = document.getElementById("usuarios_privilegioss").value;
                                                        var e = document.getElementById("usuarios_statuss").value;

                                                        var ids = a.split(",");
                                                        var nombres = b.split(",");
                                                        var passwords = c.split(",");
                                                        var privilegioss = d.split(",");
                                                        var statuss = e.split(",");

                                                        var lista = document.getElementById("lista_usuarios");
                                                        lista.removeChild(document.getElementById("user_prueba1"));

                                                        for(var i = 0; i < ids.length;i++){
                                                            if(ids[i]!=""){
                                                                var option = document.createElement("option");
                                                                var info=ids[i]+","+nombres[i]+","+passwords[i]+","+privilegioss[i]+","+statuss[i];
                                                                option.value = info;
                                                                option.innerHTML = nombres[i];
                                                                lista.appendChild(option);
                                                            }
                                                        }
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>&nbsp;</td>
                                            </tr>
                                        </table>
                                        <form action="/modificaUsuario/" method="POST">{% csrf_token %}
                                            <table id="table2_edit" border="0" width="auto"
                                                   style="margin-left: 40px;margin-top: -15px;"
                                                   >
                                                <tr>
                                                    <td rowspan="10" align="center">
                                                        <input type="button" value="" id="previous_edit" class="btn_previous" />
                                                    </td>
                                                    <td rowspan="10" align="center">
                                                        <img src="/static/images/content/userB.png" width="115" height="123" alt="" class="aligncenter "/>
                                                    </td>
                                                    <td align="right">Id Usuario:</td>
                                                    <td align="center">
                                                        <input type="text" readonly="True" name="idEdit" id="idEdit" value="" size="20" style="color:red"/>
                                                    </td>
                                                    <td rowspan="10" align="center">
                                                        <input type="submit" value="" id="send_edit" class="btn_send" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Nombre Completo:</td>
                                                    <td><input type="text" name="nombreEdit" value="" id="nombreEdit" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Contrase&ntilde;a:</td>
                                                    <td><input type="password" name="password1Edit" id="password1Edit" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Confirmar Contrase&ntilde;a:</td>
                                                    <td><input type="password" name="password2Edit" id="password2Edit" size="20" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Tipo de Usuario:</td>
                                                    <td>
                                                        <select name="privilegiosEdit" id="privilegiosEdit">
                                                            <option id="user_prueba2" >Selecciona los privilegios</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Status:</td>
                                                    <td>
                                                        <select name="statusEdit" id="statusEdit">
                                                            <option id="user_prueba3" >Selecciona un status</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" rowspan="2" align="center">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                            </table>
                                        </form>
                                    </div>
                                </div>
                            </div>
			</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
                            <li>
                                <h2>Avisos Importantes</h2>
                                <ul>
                                    <li><a href="#">Pol&iacute;ticas</a></li>
                                    <li><a href="#">Contacto</a></li>
                                    <li><a href="#">Ubicaci&oacute;n</a></li>
                                    <li><a href="#">Promociones</a></li>
                                </ul>
                            </li>
                            <li>
                                <h2>&nbsp;</h2>
                                <p>&nbsp;</p>
                            </li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	</div>
	<!-- end #page -->
	<div id="footer-bgcontent">
	<div id="footer">
		<p>Copyright (c) 2011 hard-performance.com. All rights reserved. Elaborado por <a href="#">Amigos F.C.</a></p>
	</div>
	</div>
	<!-- end #footer -->
</div>
</body>
</html>